import eventBus from '@/eventBus';
import debunce from '@/utils/debunce.js'
import diff from '@/assets/diff.gif';
let imgs = [];
function setImgs(){
  for (const img of imgs) {
    setImg(img); //调用该方法
  }
}

function setImg(img){
  img.dom.src = diff; // 替换图片
  const clientHeight = document.documentElement.clientHeight; //获取视口高度
  const desc = img.dom.getBoundingClientRect();//获取元素距离顶部的距离
  const height = desc.height || 150; //设置默认高度
  if(desc.top >= -height && desc.top <= clientHeight ){
    // 表示在视口范围内
    const tempImg = new Image();
    tempImg.onload = function(){
      img.dom.src = img.src;
    }
    tempImg.src = img.src;
    imgs = imgs.filter((i)=>i!==img) 

  }
}
function handleScro(dom){
  setImgs()
}

setInterval(() => {

}, 2000);

eventBus.$bus.$on("mainscroll",debunce(handleScro,50));
export default {
  bind(el,binding){
    const img = {
      dom:el,
      src:binding.value
    }
    imgs.push(img);
    setImgs(img);
  }
}